<template>
  <Drawer title=""
          :width="450"
          placement="left"
          :closable="false"
          :mask-closable="false"
          :draggable="false"
          transfer
          v-model="visible"
          @on-close="cancel"
          :styles="$PnUtil.buildDrawerStyleByHasFooter()">

    <Table :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadTableData">
    </Page>

    <DrawerFooter>
      <Button class="m-r-5px" @click="cancel">关闭</Button>
      <!--      <Button type="primary">确认</Button>-->
    </DrawerFooter>
  </Drawer>
</template>

<script>

import ManageMixin from '@/mixin/ManageMixin'

export default {
  name: "DynamicCustomCompTableDrawer",
  mixins: [ManageMixin],
  data() {
    return {
      visible: false,
      loading: false,
      loadTableType: '',
      columns: [
        {
          title: '缩略图',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.thumbnailPath(params.row.thumbnail)
                },
                style: {
                  width: '85px',
                  height: '50px',
                  marginTop: '5px',
                  backgroundColor: '#616161',
                  borderRadius: '4px',
                  padding: '5px'
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: '名称',
          key: 'name',
          width: '100'
        },
        {
          title: '作者',
          key: 'uploader_username'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.loadCompSTC(params.row)
                  }
                }
              }, '载入')
            ]);
          }
        }
      ],
      tableData: [],
    }
  },
  mounted() {

  },
  methods: {
    init(type) {
      this.loadTableType = type
      this.visible = true
      this.loadTableData()
    },
    loadTableData() {
      this.loading = true
      if (this.loadTableType == 'my') {
        this.$PnApi.ShareCustomCompApi.getMyShareCustomCompByPage(this.pageIndex, this.pageSize, '').then(result => {
          this.tableData = result.data.payload.list;
          this.pageTotal = result.data.payload.total;
          this.loading = false
        })
      } else if (this.loadTableType == 'share') {
        this.$PnApi.ShareCustomCompApi.getShareCustomCompByPage(this.pageIndex, this.pageSize, '', '1').then(result => {
          this.tableData = result.data.payload.list;
          this.pageTotal = result.data.payload.total;
          this.loading = false
        })
      }
    },
    thumbnailPath(thumbnail_uri) {
      if (thumbnail_uri) {
        try {
          return window.g.AXIOS_BASE_URL + thumbnail_uri
        } catch (e) {
          return ''
        }
      } else {
        return require('@/assets/image/thumbnail/thumbnail-default.png')
      }
    },
    loadCompSTC(scc) {
      this.$Modal.confirm({
        title: '确认',
        content: '确定将持久化组件（' + scc.name + '）载入当前自定义组件中吗？',
        onOk: () => {
          this.$emit('loadCompSTC', scc)
        }
      });
    },
    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
      // 可以在这里编写关闭之后的逻辑处理
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>

</style>
